/* **************    上传图片  Mixins   ***************** */
/**
 * 使用该混入的前置条件:
 *    1. 一个页面只有一个上传图片按钮，且图片路径字段名为img_path；
 *    2. 页面数据对象命名为form；
 */

import {
  deleteImage,
} from '@/api/common';
import {
  getToken
} from '@/utils/auth';

/* 组件 */
import BigImg from '@/components/BigImg'

/* 工具 */
import { mapGetters } from 'vuex'
import * as common from '@/utils/base/common'

export default {
  data() {
    return {
      // 上传图片（缩略图）
      uploadUrl: '/api/file/uploadImage',
      // 上传图片所需参数及路径
      headerMsg: {
        "Authorization": 'Bearer ' + getToken()
      },
      fileList: [],

      // 放大图片
      showBigImg: false,
      imgFullpath: '',
    }
  },
  computed: {
    ...mapGetters([
      'fastDfsUrl',
    ])
  },
  components: {
    'big-img': BigImg,
  },
  methods: {

    /* **************    上传图片      ***************** */
    // 图片保存成功调用方法
    imgSuccess(response, file, fileList) {
      if(response != "" && (typeof response.data !== 'undefined')) {
        let path = response.data
        this.form.imgPath = path
        this.imgFullpath = this.fastDfsUrl + path
      } else {
        common.tips(this, '图片上传失败！')
      }
    },

    // 删除图片
    handleRemove(file, fileList) {
      if(file.status == 'success') {
        let imgPath = ''
        if(typeof file.response === 'undefined'){
          imgPath = file.url
        } else {
          imgPath = file.response.data
        }

        if(imgUrl != '' && (typeof imgUrl !== 'undefined')) {
          let params = {
            imgPath: imgUrl
          }
          deleteImage(params).then(response => {
            if(response.code === 200) {
              this.form.imgPath = ''
              this.imgFullpath = ''
              common.message(this, 'success', 1, '删除图片成功!')
            } else {
              common.message(this, 'error', 1, '删除图片失败!')
            }
          }).catch(err => {
            common.message(this, 'error', 1, '删除图片失败!')
            console.error(err)
          })
        }

      }
    },

    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      common.message(this, 'warning', 1, '只能上传一张图片!')
    },

    // 点击文件列表中已上传的文件时的钩子（点击预览图片）
    handlePictureCardPreview(file) {
      this.imgFullpath = file.url;
      // 显示预览图片
      this.showBigImg = true;
    },
    // 上传前校验方法
    beforeImgUpload(file) {
      return common.checkImgIsOK(this, file)
    },

    //单击关闭预览图片
    closeViewImg() {
      this.showBigImg = false;
    },

  } // methods end
}
